<template>
  <div>
    <el-form :inline="true" :model="formData" :rules="rules" ref="formData" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="课程名称：" prop="lession_id">
            <el-select v-model="formData.lession_id" @change="getLessionMsg(formData.lession_id)">
              <el-option v-for="(item,index) in lession" :key="index" :label="item.lession_name" :value="item.unid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选用教材：">
            <el-input v-model="material" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="课程类型：">
            <el-input v-model="lession_type" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="课时：" prop="lession_time">
            <el-input v-model="formData.lession_time"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任课老师：">
            <el-input v-model="teacher" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学期：" prop="semester_id">
            <el-select v-model="formData.semester_id">
              <el-option v-for="(item,index) in semester" :key="index" :label="item.semester_name" :value="item.unid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计费方式：" prop="pay_mode">
            <el-select v-model="formData.pay_mode" :disabled="formData.is_period == 1">
              <el-option label="按次收费" value="1"></el-option>
              <el-option label="按小时收费" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-checkbox v-model="checked" @change="checkBtn()" style="margin-top: 10px;margin-right: 10px;"></el-checkbox>
          <el-form-item label="按期收费" prop="period">
            <el-input v-model="formData.period" :disabled="!checked" style="width: 100px;"></el-input>
          </el-form-item>
          小时/次/期
        </el-col>
        <el-col :span="24" style="align-items: center;">
          <el-form-item label="单价：" prop="price">
            <el-input v-model="formData.price"></el-input>
            <!-- 元/小时/次/期 -->
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="计费方式：" prop="pay_time">
            <el-select v-model="formData.pay_time" @change="payMode()">
              <el-option label="不限制" value="1"></el-option>
              <el-option label="截止" value="2"></el-option>
              <el-option label="X月内" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="自购买之日起：">
            <el-select v-model="formData.month" style="width: 90px;" :disabled="formData.pay_time!=3">
              <el-option v-for="(item,index) in 10" :label="item+'月内'" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="截止：">
            <div class="block">
                <span class="demonstration">默认</span>
                <el-date-picker v-model="formData.end_time" type="date" placeholder="选择日期" style="width: 200px;" :disabled="formData.pay_time!=2"></el-date-picker>
              </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="班型设置：">
            <el-radio v-model="formData.class_mode" @change="fullClass()" label="1">满班</el-radio>
            <el-radio v-model="formData.class_mode" label="2">小班</el-radio>
            <el-input v-model="formData.small_class" :disabled="formData.class_mode == 1" style="width: 100px;"></el-input><数字
            <el-radio v-model="formData.class_mode" label="3">一对一</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="状态：">
            <el-radio v-model="formData.status" label="1">启用</el-radio>
            <el-radio v-model="formData.status" label="2">停用</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="text-align: right;">
        <el-form-item>
          <el-button @click="enters('formData')">确定</el-button>
        </el-form-item>
        <!-- <el-button @click="close">取消</el-button> -->
      </div>
    </el-form>
  </div>
</template>

<script>
  import { queryLession,queryPayLession,selectPayLession,querySemesterList,queryLessionList,queryLessionById,addPayLession,queryTeachById,getPayItem,queryTeach } from '@/api/studentRecruit.js'
  import { getSessionInfo, delSessionInfo } from '@/utils/auth'
  export default {
    name: 'index',
    data() {
      return {
        value:'momo',
        checked:false,
        formData:{
          unid:null,
          lession_id:null, //课程id
          lession_time:null, //课时
          semester_id:null, //学期
          pay_mode:'1', //计费方式 1按次收费 2按小时收费
          is_period:'0', //按期收费
          period:0, //多少小时一期
          price:null, //单价
          pay_time:'1', //收费时间 1不限制 2截止,3X月内
          end_time:null, //结束时间
          month:null, //截止月份
          class_mode:'1', //班型设置 1满班 2小班 3一对一
          small_class:'', //小班人数
          status:'1', //状态 1启用 2不启用
          item:null, //所有收费项目的id ,一维数组
        },
        lession_type:null, //课程类型
        material:null, //选用教材
        teacher:null, //任课老师
        lession:null, //获取所有课程
        lessionMsg:null, //课程详细信息
        rules: {
          lession_id: [
            { required: true, message: '请选择课程', trigger: 'blur,change' }
          ],
          semester_id: [
            { required: true, message: '请选择学期', trigger: 'blur,change' }
          ],
          lession_time: [
            { required: true, message: '请输入课时', trigger: 'blur,change' }
          ],
          pay_mode: [
            { required: true, message: '请选择方式', trigger: 'blur,change' }
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur,change' }
          ],
          pay_time: [
            { required: true, message: '请选择方式', trigger: 'blur,change' }
          ],
          period: [
            { required: true, message: '请输入数值', trigger: 'blur,change' }
          ],
        }
      }
    },
    created() {
      console.log('query',this.queryFun());
      this.allLession()
    },
    methods:{
      //主页点击查看
      clickQuery(){
        if(this.list){
          this.formData = this.list
          this.formData.class_mode = this.formData.class_mode.toString()
          this.formData.status = this.formData.status.toString()
          this.formData.is_period = this.formData.is_period.toString()
          this.formData.pay_mode = this.formData.pay_mode.toString()
          if(this.formData.is_period == 1){
            this.checked = true
          }else{
            this.checked = false
          }
          console.log(this.formData.lession.lession_name);
          console.log('formData',this.formData);
          this.getLessionMsg(this.formData.lession_id)
        }
      },
      //计费方式
      payMode(){
        //计费方式
        switch (this.formData.pay_time){
          case '1':
          this.formData.end_time = null
          this.formData.month = null
            break;
          case '2':
          this.formData.month = null
            break;
          case '3':
          this.formData.end_time = null
            break;
          default:
            break;
        }
      },
      //满班单选
      fullClass(){
        //如果选中满版
        if(this.formData.class_mode == 1){
          //小班人数清空
          this.formData.small_class = null
        }
      },
      //按期收费单选框
      checkBtn(){
        //is_period按期收费状态，0未选中，1选中
        if(this.checked == false){
          this.formData.is_period = 0
          //如果未选中按期收费,多少小时一期清空
          this.formData.period = 0
          this.formData.pay_mode = '1'
        }else{
          this.formData.is_period = 1
          //否则计费方式清空
          this.formData.pay_mode = '1'
        }
      },
      //确认按钮
      enters(formData){
        //表单验证
        this.$refs[formData].validate((valid) => {
          if (valid) {
            //unid==null添加信息unid!=null编辑信息
            console.log(this.formData)
            addPayLession(this.formData).then(res => {
              if(res.code == 200){
                this.$message.success('成功！')
                this.queryFun()
                //初始化表单内容
                if(this.formData.unid == null){
                  Object.keys(this.formData).forEach(key => {
                    this.formData[key]=''
                  })}
                  // ?????????????
              }
            })
          } else {
            return false;
          }
        });
      },
      async allLession(){
        let resData = {}
        //获取所有课程 - 收费课程
        let data = await queryLessionList(resData)
        if(data.code == 200){
          this.lession = data.data
        }
        console.log('获取所有课程',this.lession);
        console.log('获取学期信息',this.semester);
      },
      async getLessionMsg(unid){
        //获取课程的详细信息
        let resData = {
          unid:unid
        }
        let data = await queryLessionById(resData)
        if(data.code == 200){
          this.lessionMsg = data.data
          this.teacher = this.lessionMsg.teacher_name
          switch (this.lessionMsg.lession_type){
            case 1:
            this.lession_type = '线上'
              break;
            case 2:
            this.lession_type = '线下'
              break;
            default:
              break;
          }
        }
        let resData2 = {
          unid:this.lessionMsg.textbook_id
        }
        let data2 = await queryTeachById(resData2)
        console.log('data2',data2);
        if(data2.code == 200){
          this.material = data2.data.textbook_name
        }
        console.log('lessionMsg',this.lessionMsg);
      },
    },
    props:{
      semester: {
      	type: Array ,
      	default: []
      },
      list: {
      	type: Object ,
      	default: null
      },
      queryFun:{
        type: Function,
        default: () => {}
      }
    }
  }
</script>

<style>
</style>
